import {Component} from "react";
import {Form, Input, Button, message} from "antd";
import {connect} from "dva";
import {getQueryString} from "../../utils/helper";

const FormItem = Form.Item;
@Form.create()
@connect(state => ({
  data: state.menu.data
}))
export default class MenuEdit extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    const {dispatch} = this.props;
    const id = getQueryString("id");
    dispatch({
      type: "menu/detail",
      payload: {
        id
      }
    });
  }

  save() {
    const {dispatch} = this.props;
    dispatch({
      type: "menu/update",
      payload: {
        data: this.props.form.getFieldsValue()
      }
    });
  }

  render() {
    const data = this.props.data || {};
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: {span: 4},
      wrapperCol: {span: 8},
    };
    return (
      <div style={{margin: '5px 5px 0'}}>
        <FormItem><Input id="id" value={data.id} style={{display: "none"}}/></FormItem>
        <FormItem label="名称" {...formItemLayout}>
          {getFieldDecorator('name', {
            rules: [
              {required: true, message: '请输入菜单名称'}
            ],
            initialValue: data.name
          })(<Input placeholder="名称"/>)}
        </FormItem>
        <FormItem label="地址" {...formItemLayout}>
          {getFieldDecorator('url', {
            rules: [
              {required: true, message: '请输入菜单地址'}
            ],
            initialValue: data.url
          })(<Input placeholder="地址"/>)}
        </FormItem>
        <div style={{width: "100%", textAlign: "center"}}>
          <Button size="small" type="primary" onClick={this.save.bind(this)}>保存</Button>
        </div>
      </div>
    );
  }
}
